<template>
  <div class="designer-sidebar">
    <el-tabs type="border-card" class="sidebar-tabs">
      <el-tab-pane label="添加" name="add">
        <div class="sidebar-content">
          <div class="tool-group">
            <h4>基础形状</h4>
            <div class="tool-grid">
              <div class="tool-item" @click="emit('addShape', 'rectangle')">
                <span class="tool-icon">□</span>
                <span class="tool-label">矩形</span>
              </div>
              <div class="tool-item" @click="emit('addShape', 'circle')">
                <span class="tool-icon">○</span>
                <span class="tool-label">圆形</span>
              </div>
              <div class="tool-item" @click="emit('addShape', 'triangle')">
                <span class="tool-icon">△</span>
                <span class="tool-label">三角形</span>
              </div>
              <div class="tool-item" @click="emit('addShape', 'polygon')">
                <span class="tool-icon">⬡</span>
                <span class="tool-label">多边形</span>
              </div>
            </div>
          </div>
          
          <div class="tool-group">
            <h4>绘制工具</h4>
            <div class="tool-grid">
              <div class="tool-item" @click="emit('activateTool', 'brush')">
                <span class="tool-icon"><i class="el-icon-brush"></i></span>
                <span class="tool-label">画笔</span>
              </div>
              <div class="tool-item" @click="emit('addShape', 'line')">
                <span class="tool-icon">╱</span>
                <span class="tool-label">直线</span>
              </div>
            </div>
          </div>
          
          <div class="tool-group">
            <h4>辅助工具</h4>
            <div class="tool-grid">
              <div class="tool-item" @click="emit('toggleGrid')">
                <span class="tool-icon"><i class="el-icon-set-up"></i></span>
                <span class="tool-label">网格</span>
              </div>
              <div class="tool-item" @click="emit('toggleRuler')">
                <span class="tool-icon"><i class="el-icon-ruler"></i></span>
                <span class="tool-label">标尺</span>
              </div>
            </div>
          </div>
          
          <div class="tool-group">
            <h4>颜色</h4>
            <div class="color-picker-container">
              <el-color-picker v-model="selectedColor" size="medium" @change="updateColor" />
              <span class="color-value">{{selectedColor}}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="海报" name="template">
        <div class="sidebar-content">
          <div class="search-bar">
            <el-input
              placeholder="搜索模板"
              prefix-icon="el-icon-search"
              v-model="templateSearch"
            />
          </div>
          
          <div class="templates-container">
            <h4>热门模板</h4>
            <div class="template-grid">
              <div 
                v-for="(template, index) in filteredTemplates" 
                :key="index" 
                class="template-item"
                @click="emit('applyTemplate', template)"
              >
                <div class="template-thumbnail">
                  <img :src="template.thumbnail" :alt="template.name" />
                </div>
                <div class="template-name">{{ template.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="图层" name="layers">
        <div class="sidebar-content">
          <LayerPanel />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="文字" name="text">
        <div class="sidebar-content">
          <div class="tool-group">
            <h4>添加文字</h4>
            <el-button type="primary" icon="el-icon-plus" @click="emit('addText')">添加文字</el-button>
          </div>
          
          <div class="tool-group">
            <h4>常用文字样式</h4>
            <div class="text-style-list">
              <div 
                v-for="(style, index) in textStyles" 
                :key="index" 
                class="text-style-item"
                @click="emit('applyTextStyle', style)"
              >
                <div 
                  class="text-style-preview" 
                  :style="{
                    fontFamily: style.fontFamily,
                    fontSize: style.fontSize + 'px',
                    fontWeight: style.fontWeight,
                    fontStyle: style.fontStyle,
                    color: style.color
                  }"
                >
                  {{ style.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import LayerPanel from '../layers/LayerPanel.vue';

const emit = defineEmits([
  'addShape', 
  'activateTool', 
  'toggleGrid', 
  'toggleRuler', 
  'addText',
  'applyTemplate',
  'applyTextStyle'
]);

// 颜色选择器
const selectedColor = ref('#FF5722');
const updateColor = (color) => {
  emit('setColor', color);
};

// 模板搜索
const templateSearch = ref('');
const templates = ref([
  { id: 1, name: '简约黑白海报', thumbnail: '/images/templates/template1.jpg' },
  { id: 2, name: '商务宣传海报', thumbnail: '/images/templates/template2.jpg' },
  { id: 3, name: '创意艺术海报', thumbnail: '/images/templates/template3.jpg' },
  { id: 4, name: '节日庆典海报', thumbnail: '/images/templates/template4.jpg' },
  { id: 5, name: '时尚产品展示', thumbnail: '/images/templates/template5.jpg' },
  { id: 6, name: '教育培训海报', thumbnail: '/images/templates/template6.jpg' },
]);

const filteredTemplates = computed(() => {
  if (!templateSearch.value) return templates.value;
  return templates.value.filter(template => 
    template.name.toLowerCase().includes(templateSearch.value.toLowerCase())
  );
});

// 文字样式
const textStyles = ref([
  { 
    name: '标题', 
    fontFamily: 'Microsoft YaHei', 
    fontSize: 32, 
    fontWeight: 'bold', 
    fontStyle: 'normal', 
    color: '#333333' 
  },
  { 
    name: '副标题', 
    fontFamily: 'Microsoft YaHei', 
    fontSize: 24, 
    fontWeight: 'normal', 
    fontStyle: 'normal', 
    color: '#666666' 
  },
  { 
    name: '正文', 
    fontFamily: 'SimSun', 
    fontSize: 16, 
    fontWeight: 'normal', 
    fontStyle: 'normal', 
    color: '#333333' 
  },
  { 
    name: '强调文本', 
    fontFamily: 'Microsoft YaHei', 
    fontSize: 18, 
    fontWeight: 'bold', 
    fontStyle: 'normal', 
    color: '#FF5722' 
  },
  { 
    name: '引用', 
    fontFamily: 'KaiTi', 
    fontSize: 18, 
    fontWeight: 'normal', 
    fontStyle: 'italic', 
    color: '#999999' 
  },
]);
</script>

<style scoped>
.designer-sidebar {
  height: 100%;
  border-right: 1px solid #e0e0e0;
  overflow: hidden;
}

.sidebar-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 覆盖Element UI的标签样式 */
:deep(.el-tabs__content) {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.sidebar-content {
  padding: 12px;
  height: 100%;
  overflow-y: auto;
}

.tool-group {
  margin-bottom: 20px;
}

.tool-group h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 8px 0;
  cursor: pointer;
  transition: all 0.3s;
}

.tool-item:hover {
  background-color: #e6f1fc;
  color: #409EFF;
}

.tool-icon {
  font-size: 20px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.tool-label {
  font-size: 12px;
}

.color-picker-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-value {
  font-size: 12px;
  color: #606266;
}

/* 模板部分 */
.search-bar {
  margin-bottom: 15px;
}

.templates-container {
  margin-top: 10px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.template-item {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

.template-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.template-thumbnail {
  width: 100%;
  height: 100px;
  overflow: hidden;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-name {
  padding: 5px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文字样式部分 */
.text-style-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-style-item {
  padding: 8px;
  border-radius: 4px;
  background-color: #f5f7fa;
  cursor: pointer;
  transition: all 0.3s;
}

.text-style-item:hover {
  background-color: #e6f1fc;
}

.text-style-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>